import ajax from '../../utils/ajax';

const dataList = document.getElementById('dataList');
const pageSelect = document.getElementById('pageSelect');
console.log(dataList, pageSelect);
let per_page = 1;
let page = 1;
let search_string = '';
let pageTotal;

init();

function init() {
  //渲染初始数据
  showData();
}

function showData() {
  dataList.innerHTML = '';
  ajax('get', 'api/getNote', {
    search_string,
    page,
    per_page,
  }).then(({ data: { list, total, pageSize } }) => {
    per_page = pageSize;
    pageTotal = Math.ceil(total / pageSize);
    console.log(list, total, pageSize);
    //生成分页按钮
    createPageSelect();
    // 渲染数据
    list.forEach(item => {
      const tr = document.createElement('tr');
      let td;

      td = document.createElement('td');
      td.innerText = item.id;
      tr.appendChild(td);

      td = document.createElement('td');
      td.innerText = item.title;
      tr.appendChild(td);

      td = document.createElement('td');
      td.innerText = item.updateTime.slice(0, 10);
      tr.appendChild(td);

      td = document.createElement('td');
      td.innerText = item.createTime.slice(0, 10);
      tr.appendChild(td);

      td = document.createElement('td');

      const modifyBtn = document.createElement('button');
      modifyBtn.innerText = '修改';
      modifyBtn.onclick = modifyBtn_click.bind(item.id);
      td.appendChild(modifyBtn);

      const deleteBtn = document.createElement('button');
      deleteBtn.innerText = '删除';
      deleteBtn.onclick = deleteBtn_click.bind(item.id);
      td.appendChild(deleteBtn);

      tr.appendChild(td);




      dataList.appendChild(tr);


    });
  })
}



function modifyBtn_click() {
  this;
}

function deleteBtn_click() {
  this;
}

//分页
function createPageSelect() {
  pageSelect.innerHTML = '';
  let btn;

  btn = document.createElement('button');
  btn.innerText = '首页';
  btn.onclick = function () {
    page = 1;
    showData();
  }
  pageSelect.appendChild(btn);


  //创建按钮，给按钮加入页码，给按钮附加点击事件，插入pageSelect
  //点击事件：改变page的值，调用showData()


  // 上一页
  // 判断当前页是否大于1
  if (page > 1) {
    // 创建button按钮
    btn = document.createElement('button');
    btn.innerHTML = '上一页';
    // 创建点击事件
    btn.onclick = function () {
      // 页数减减
      page--;
      // 重新渲染
      showData();

    }
    if (page == 1) {
      btn.setAttribute('disable')
    }
    // btn插入div
    pageSelect.appendChild(btn);
  }

  // 获取起始末尾显示页数
  let start = page - 3 < 1 ? 1 : page - 3;
  let end = page + 3 > pageTotal ? pageTotal : page + 3;

  // 判断起始显示页数是否大于1
  if (start > 1) {
    // 创建span标签
    const span = document.createElement('span');
    // 插入三个点
    span.innerHTML = '...';
    pageSelect.appendChild(span);
  }

  // 显示页数
  // 循环页数
  for (let i = start; i <= end; i++) {
    // 创建buton按钮
    btn = document.createElement('button');
    // 每个button按钮插入页数
    btn.innerText = i;
    // 判断i和当前页数是否相等
    if (i == page) {
      // 相等的话当前页数赋背景色
      btn.style.backgroundColor = 'red';
    } else {
      // 否则添加点击事件
      btn.onclick = function () {

        page = i;
        showData();
      }
    }
    pageSelect.appendChild(btn);
  }
  if (end < pageTotal) {
    const span = document.createElement('span');
    span.innerHTML = '...';
    pageSelect.appendChild(span);
  }


  // 下一页
  if (page < pageTotal) {
    btn = document.createElement('button');
    btn.innerHTML = '下一页';
    btn.onclick = function () {
      page++;
      showData();
    }
    pageSelect.appendChild(btn);
  }








  btn = document.createElement('button');
  btn.innerText = '尾页';
  btn.onclick = function () {
    page = pageTotal;
    showData();
  }
  pageSelect.appendChild(btn);

}